<template>
  <div class="InspectionDet">
    <NavBar fixed placeholder title="巡检区域列表" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="
            $router.push({
              path: 'InspectionList',
              query: {
                activeName: 'b',
              },
            })
          "
        />
      </template>
    </NavBar>
    <img class="bg-img" src="../../../assets/img/card.png" alt="" />
    <img class="bg-img2" src="../../../assets/img/gaizhang2.png" alt="" />
    <div class="header">
      <div class="state">任务状态-{{ info.state }}</div>
      <div class="id">任务编号：{{ info.ectId }}</div>
    </div>
    <div class="main">
      <div class="card">
        <Cell title="路线名称" :value="info.ecrName"></Cell>
        <Cell title="路线编号" :value="info.ectId"></Cell>
        <Cell title="任务计划开始时间" :value="info.startTime"></Cell>
        <Cell title="任务计划结束时间" :value="info.endTime"></Cell>
        <Cell title="认领人" :value="info.checkUser"></Cell>
        <Cell title="认领时间" :value="info.claimDtm"></Cell>
        <div class="placeholder"></div>
        <div class="item" v-for="(item, i) in info.areaList" :key="i">
          <div class="checkItems" @click="toJump2(item)">
            <div class="item-title flex">
              <div class="ico">
                <img
                  style="width: 0.53rem"
                  v-if="item.STATE == '已检'"
                  src="../../../assets/img/gou.png"
                  alt=""
                />
                <img
                  style="width: 0.53rem"
                  v-else
                  src="../../../assets/img/wei.png"
                  alt=""
                />
              </div>
              <div class="item-no">
                <span> {{ item.ECA_NAME }}</span>
                <span> {{ item.ECA_TEXT }}</span>
              </div>
            </div>
            <div
              class="item-state"
              :class="{
                itemStateColor1: item.STATE == '已检',
                itemStateColor2: item.STATE == '未检',
                itemStateColor3: item.STATE == '逾期',
              }"
            >
              {{ item.STATE }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <SideBtn :to="{ name: 'SnapshotSteps' }" /> -->
    <Button
      v-if="transferFlag && info.isShowFP == 0"
      class="btn btn1"
      @click="transfer"
    >
      任务分配
    </Button>
    <Button v-if="submitFlag" class="btn btn1" @click="onSubmit">提交</Button>
    <Button class="btn">扫一扫</Button>
  </div>
</template>

<script>
import { DeviceInspectionDetails, DeviceTaskAssignment } from "@/api/work";
import SideBtn from "components/SideBtn";
import {
  Image as VanImage,
  Uploader,
  Popup,
  NavBar,
  Icon,
  Field,
  Cell,
  List,
  Button,
} from "vant";
export default {
  props: {},
  data() {
    return {
      // name: "1",
      // location: "2",
      // describe: "3",
      // user: "4",
      // phone: "5",
      // itemList: [
      //   { state: "已检", title: "11213213" },
      //   { state: "未检", title: "11213213" },
      // ],
      info: {},
    };
  },
  computed: {
    transferFlag() {
      if (this.info.areaList) {
        let num = this.info.areaList.filter((v) => v.STATE == "未检").length;
        return this.info.areaList.length == num;
      }
      return false;
    },
    submitFlag() {
      if (this.info.areaList) {
        let num = this.info.areaList.filter((v) => v.STATE == "已检").length;
        return this.info.areaList.length == num;
      }
      return false;
    },
  },
  created() {},
  mounted() {
    this.getInfo();
  },
  watch: {},
  methods: {
    async getInfo() {
      const { param } = await DeviceInspectionDetails({
        ectNo: this.$route.query.ectNo,
      });
      console.log(param.data);
      this.info = param.data;
    },
    toJump2(item) {
      if (item.STATE !== "未检") return;
      this.$router.push({
        path: "InspectionRecord",
        query: {
          ectNo: this.$route.query.ectNo,
          ecaNo: item.ECA_NO,
        },
      });
    },
    transfer() {
      this.$router.push({
        name: "InspectionTransfer",
        query: { ectNo: this.$route.query.ectNo },
      });
      // this.$router.push({
      //   name: "InspectionList",
      //   query: {
      //     activeName: "c",
      //   },
      // });
    },
    async onSubmit() {
      const data = await DeviceTaskAssignment({
        ectNo: this.$route.query.ectNo,
        type: 1,
      });
      this.$router.push({
        name: "InspectionList",
        query: {
          activeName: "c",
        },
      });
    },
  },
  components: {
    VanImage,
    Uploader,
    Button,
    Popup,
    NavBar,
    Icon,
    Field,
    Cell,
    List,
    SideBtn,
  },
};
</script>

<style scoped lang="less">
@import "~@/style/var.less";
* {
  box-sizing: border-box;
}
.InspectionDet {
  padding-bottom: 300px;
  background-color: #f8f8f8;
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .bg-img {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .bg-img2 {
    z-index: 99;
    width: 200px;
    height: 200px;
    position: absolute;
    right: 24px;
    top: 150px;
  }
  .header {
    width: 100%;
    height: 190px;
    // background-color: red;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-left: 20px;
    color: #edf0f5;

    .state {
      font-size: 48px;
      z-index: 99;
    }
    .id {
      font-size: 26px;
      z-index: 99;
    }
  }
  .main {
    padding: 0 15px;
    .card {
      width: 100%;
      overflow: hidden;
      background-color: #fff;
      padding-bottom: 30px;
      .placeholder {
        width: 100%;
        height: 20px;
        background-color: #f7f7f9;
      }
      .checkItems {
        width: 100%;
        height: 100px;
        // background-color: red;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        .item-title {
          .ico {
            margin-right: 20px;
            margin-top: 5px;
          }
        }
        .item-state {
        }
        .itemStateColor1 {
          color: #3aa5ff;
        }
        .itemStateColor2 {
          color: @primary;
        }
        .itemStateColor3 {
          color: #fb6380;
        }
      }
    }
  }
  .phone-text {
    font-size: 28px;
    padding: 20px;
    padding-left: 30px;
  }
  .images {
    margin-left: 25px;
  }
  .drag {
    position: fixed;
    bottom: 200px;
    right: 20px;
    padding: 10px;
    border-radius: 12px;
    background-color: #c6a86f;
    color: #fff;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 7px;
    }
  }
  .btn {
    height: 98px;
    position: fixed;
    bottom: 10px;
    left: 50%;
    width: 90%;
    transform: translate(-50%);
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    color: @primary;
    border: 1px solid @primary;
    font-size: 36px;
  }
  .btn1 {
    bottom: 120px;
    color: #3aa5ff;
    border-color: #3aa5ff;
  }
  .item-no {
    display: flex;
    flex-flow: column;
  }
}
</style>